<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        *{
            margin: 0;
            padding: 0;
        }

        body{
            width: 1000px;
             margin: 0 auto;
        }

        .inlineblock{
            display: inline-block;
        }

        .floatleft,.box>div{
            float: left;
        }

        .floatright{
            float: right;
        }

        .clearfix::after{
            content: "";
            clear: both;
            display: block;
        }

        a{
            text-decoration: none;
            display: inline-block;
        }

        .head a{
            color: white;
            width: 92px;
            display: inline-block;
            box-sizing: border-box;
            height: 48px;
            text-align: center;
        }

        .borderbox{
            box-sizing: border-box;
        }

        .borderbottom{
            border-bottom: 1px solid black;
            font-size: 18px;
            font-family: 微软雅黑;
            padding: 10px 0;
        }

        .box{
            width: 596px;
            height: 48px;
            background-color: green;
            border-radius: 24px;
            padding: 0 50px;
        }

        .main,.head{
            padding: 20px 0;
        }

        .head{
            height: 88px;
        }

        .box a{
            margin: 0 0 0 4px;
            height: 48px;
            line-height: 48px;
        }

        .home{
            background-color: #f3ff41;
        }

       
        .box a:hover{
            color: black;
            background-color: white;
        }

        .head1{
            box-sizing: border-box;
            width: 1000px;
            height: 280px;
        }
      
        .head1img1{
            width: 670px;
            height: 280px;
        }

        .head1box{
            width: 300px;
            height: 280px;
        }

        .head1img2{
            width: 300px;
            height: 100px;
        }

        .head1boxright>.floatleft{
            width: 75px;
            height: 76px;
            padding: 36px 0 0 0;
            text-align: center;
        }

        .head1boxright>.floatleft>a{
            font-size: 12px;
            text-align: center;
        }

        .head1boxright .img{
            display: block;
            margin: 0 auto;
        }

        .head1boxright .img:hover:hover{
            opacity: 0;
        }

        .tengxun,.RSS,.weibo,.youxiang{
            background-repeat: no-repeat;
            background-position: 50% 60%;
        }

        .weibo{
             background-image:url(../兔小白图片/微博2.png);
        }

        .tengxun{
            background-image: url(../兔小白图片/腾讯微博2.png);
        }

        .RSS{
            background-image: url(../兔小白图片/RSS2.png);
        }

        .youxiang{
            background-image: url(../兔小白图片/邮箱2.png);
        }

        .head1boxright>div a{
            color: grey;
            font: 12px;
        }

        .head1boxright>div>a:hover{
            color: black;
        }

        .main{
            width: 1000px;
        }
        
        .headleft{
            width: 670px;
            height: 30px;
        }

        .headleft>h2{
            font-size: 16px;
            padding: 0 0 0 5px;
        }

        .headleft a{
            color: #666;
            font-size: 12px;
        }

        .leftmainhome{
            border-top: 2px solid brown;
        }

        .leftmain{
            box-sizing: border-box;
            width: 670px;
            height: 197px;
            border-bottom: 1px solid black;
            padding: 30px 0;
        }

        .leftmain img{
            width: 167px;
            vertical-align: top;
        }

        .leftmain>div{
            padding: 0 0 0 20px;
        }
        
        .leftmain>div h3>a{
            color: black;
        }

        .leftmain h3{
            font-size: 16px;
        }

        .leftmain>div h3>a:hover,.group>a:hover,.footer a:hover{
            color: #759B08;
            text-decoration: underline;
        }
        
        .pd{
            box-sizing: border-box;
            width: 483px;
            height: 84px;
            font-size: 12px;
            padding: 12px 0;
            color: #756771;
        }

        .footer{
            height: 20px;
        }

        .footer img{
            vertical-align: middle;
            width: auto;
            padding: 0 5px;
        }

        .footer,.footer a{
            color: #759B08;
            font-size: 12px;
        }

        .footer{
            color: #756F71;
        }

        .right{
            padding: 0 0 0 30px;
            width: 300px;
        }

        .right a{
            color: #666;
            font-size: 14px;
        }

        .righttab1{
            width: 300px;
            height: 271px;
        }

        .righthead1{
            border-bottom: 1px solid black;
        }
        
        .righthead1>a{
            width: 90px;
            height: 32px;
            text-align: center;
            line-height: 32px;
        }

        .righthead1>a:hover{
            background-color: orange;
            color: white;
        }
        
        .rightbody1>div{
            border-bottom: 1px solid black;
            margin: 0 0 0 10px;
            padding: 8px 0;
        }

        .rightbody1 .inlineblock{
            font-size: 12px;
            color: white;
            text-align: center;
            width: 19.04px;
            height: 16px;
            border-radius: 5px;
        }
        
        .rightbody1 a:hover{
            color: black;
        }

        .righttab2{
          
        }
        
        .righthead2>h3,.righthead3>h3,.righthead4>h3{
            border-bottom: 1px solid black;
            padding: 10px 0;
            margin: 15px 0 20px;
            font-size: 18px;
        }
    
        .rightbody2>a{
            box-sizing: border-box;
            height: 32px;
            color: white;
            background-color: black;
            padding: 7px;
            margin: 5px 3px;
            border-radius: 8px;
        }

        .rightbody2>a:hover{
            border-radius: 0px;
            transition: all 0.5s;
        }

        .rightbody2>a:not(:hover){
            border-radius: 8px;
            transition: all 0.5s;
        }

        .righttab3{
            height: 415px;
        }

        .rightbody3 a>img{
            width: 70px;
        }

        .rightbody3 img{
            vertical-align: middle;
        } 

        .groupw{
            height: 57px;
            margin: 10px 0;
        }

        .group{
            margin: 0 0 0 10px;
            padding: 5px 0 0;
            width: 220px;
            color: #333;
        }

        .group>a{
            margin: 0 0 10px;
        }

        .group>.floatleft{
            font-size: 12px;
        }

        .group>a:hover{
            color: red;
        }

        .group>.floatleft a:hover{
            color: #759B08;
        }

        .righthead4 a:hover{
            color: red;
        }

        .rightbody4{
            margin: 30px 0 0;
            padding: 15px;
            background-color: #F9F9F9;
            width: 301.33px;
            height: 72.63px;
            font-size: 12px;
        }

        .rightbody4 a{
            margin: 0 0 0 10px;
            font-size: 12px;
            line-height: 21.16px;
        }

        .rightbody4 a:hover{
            color: black;
        }

    </style>

</head>
<body>
    <div class="body">
        <div class="head borderbox clearfix">
            <div class="floatleft">
                <img src="../兔小白图片/logo.png" alt="">
            </div>
            <div class="boxw clearfix">
                <div class="box floatright borderbox">
                    <a href="" style="color: black;width: 76px;" class="home">首页</a>
                    <a href="">关于我</a>
                    <a href="">文章</a>
                    <a href="">心情</a>
                    <a href="">相册</a>
                    <a href="">留言</a>
                </div>
            </div>
        </div>

        <div class="">
            <div class="head1 ">
                <div class="floatleft head1img">
                    <img src="../兔小白图片/a2.jpg
                    " class="head1img1" alt="">
                </div>

                <div class="head1box floatright ">
                    <div class="">

                    <div class="borderbottom">关注我</div>

                    <div class="head1boxright clearfix">                      
                        <div class="floatleft weibo">
                            <a href=""><img src="../兔小白图片/微博1.jpg" alt="" class="img"></a>
                            <a>新浪微博</a>
                        </div>
                        <div class="floatleft tengxun">
                            <a href=""><img src="../兔小白图片/腾讯微博1.jpg" alt="" class="img"></a>
                            <a>腾讯微博</a>
                        </div>
                        <div class="floatleft RSS">
                            <a href=""><img src="../兔小白图片/RSS1.jpg" alt="" class="img"></a>
                            <a>RSS</a>
                        </div>
                        <div class="floatleft youxiang">
                            <a href=""><img src="../兔小白图片/邮箱1.jpg" alt="" class="img"></a>
                            <a>邮箱</a>
                        </div>
                    </div>
                    <br>
                    <div>
                    <img src="http://124.222.209.246:8430/txb/imgs/t.jpg" alt="">
                    </div>

                </div>
            </div>
        </div>

          
        <div class="main borderbox inlineblock">
            
            <div class="left clearfix floatleft">
                <div class="headleft clearfix">
                    <h2 class="floatleft">文章推荐 </h2>
                    <div class="floatright">
                        <a href="" class="">栏目标题1 </a>
                        <a href="" class="">栏目标题2 </a>
                        <a href="" class="">栏目标题3 </a>
                    </div>
                </div>
            
                <div class="leftmain leftmainhome">
                    <a href="" class="floatleft">
                        <img src="../兔小白图片/01.jpg" alt="">
                    </a>
                    <div class="floatleft">
                    <div class="">
                    <h3><a href="">住在手机里的朋友</a></h3>
                    </div>
                    <p class=" pd ">
                        通信时代，无论是初次相见还是老友重逢，交换联系方式，
                        常常是彼此交换名片，然后郑重或是出于礼貌用手机记下
                        对方的电话号码。在快节奏的生活里，我们不知不觉中就
                        成为住在别人手机里的朋友。又因某些意外，变成了别人
                        手机里匆忙的过客，这种快餐式的友谊 ...
                    </p>
                    <div class="footer">
                        <div class="floatleft" >
                            <img src="../兔小白图片/newsbg01.png" alt="">
                            <a href="">个人博客</a>
                            <img src="../兔小白图片/newsbg02.png" alt="">
                            2014-02-19
                        </div >
                        <div class="floatright" style="padding: 0 20px 0 0;" >
                            <img src="../兔小白图片/newsbg03.png" alt="">
                            评论
                            <a href="">(30)</a>
                            <img src="../兔小白图片/newsbg04.png" alt="">
                            浏览
                            <a href="">(459)</a>
                        </div>
                    </div>
                    </div>
                </div>

                <div class="leftmain">
                    <a href="" class="floatleft">
                        <img src="../兔小白图片/02.jpg" alt="">
                    </a>
                    <div class="floatleft">
                    <div class="">
                    <h3><a href="">住在手机里的朋友</a></h3>
                    </div>
                    <p class=" pd ">
                        通信时代，无论是初次相见还是老友重逢，交换联系方式，
                        常常是彼此交换名片，然后郑重或是出于礼貌用手机记下
                        对方的电话号码。在快节奏的生活里，我们不知不觉中就
                        成为住在别人手机里的朋友。又因某些意外，变成了别人
                        手机里匆忙的过客，这种快餐式的友谊 ...
                    </p>
                    <div class="footer">
                        <div class="floatleft" >
                            <img src="../兔小白图片/newsbg01.png" alt="">
                            <a href="">个人博客</a>
                            <img src="../兔小白图片/newsbg02.png" alt="">
                            2014-02-19
                        </div >
                        <div class="floatright" style="padding: 0 20px 0 0;" >
                            <img src="../兔小白图片/newsbg03.png" alt="">
                            评论
                            <a href="">(30)</a>
                            <img src="../兔小白图片/newsbg04.png" alt="">
                            浏览
                            <a href="">(459)</a>
                        </div>
                    </div>
                    </div>
                </div>

                <div class="leftmain">
                    <a href="" class="floatleft">
                        <img src="../兔小白图片/03.jpg" alt="">
                    </a>
                    <div class="floatleft">
                    <div class="">
                    <h3><a href="">住在手机里的朋友</a></h3>
                    </div>
                    <p class=" pd ">
                        通信时代，无论是初次相见还是老友重逢，交换联系方式，
                        常常是彼此交换名片，然后郑重或是出于礼貌用手机记下
                        对方的电话号码。在快节奏的生活里，我们不知不觉中就
                        成为住在别人手机里的朋友。又因某些意外，变成了别人
                        手机里匆忙的过客，这种快餐式的友谊 ...
                    </p>
                    <div class="footer">
                        <div class="floatleft" >
                            <img src="../兔小白图片/newsbg01.png" alt="">
                            <a href="">个人博客</a>
                            <img src="../兔小白图片/newsbg02.png" alt="">
                            2014-02-19
                        </div >
                        <div class="floatright" style="padding: 0 20px 0 0;" >
                            <img src="../兔小白图片/newsbg03.png" alt="">
                            评论
                            <a href="">(30)</a>
                            <img src="../兔小白图片/newsbg04.png" alt="">
                            浏览
                            <a href="">(459)</a>
                        </div>
                    </div>
                    </div>
                </div>

                <div class="leftmain">
                    <a href="" class="floatleft">
                        <img src="../兔小白图片/04.jpg" alt="">
                    </a>
                    <div class="floatleft">
                    <div class="">
                    <h3><a href="">住在手机里的朋友</a></h3>
                    </div>
                    <p class=" pd ">
                        通信时代，无论是初次相见还是老友重逢，交换联系方式，
                        常常是彼此交换名片，然后郑重或是出于礼貌用手机记下
                        对方的电话号码。在快节奏的生活里，我们不知不觉中就
                        成为住在别人手机里的朋友。又因某些意外，变成了别人
                        手机里匆忙的过客，这种快餐式的友谊 ...
                    </p>
                    <div class="footer">
                        <div class="floatleft" >
                            <img src="../兔小白图片/newsbg01.png" alt="">
                            <a href="">个人博客</a>
                            <img src="../兔小白图片/newsbg02.png" alt="">
                            2014-02-19
                        </div >
                        <div class="floatright" style="padding: 0 20px 0 0;" >
                            <img src="../兔小白图片/newsbg03.png" alt="">
                            评论
                            <a href="">(30)</a>
                            <img src="../兔小白图片/newsbg04.png" alt="">
                            浏览
                            <a href="">(459)</a>
                        </div>
                    </div>
                    </div>
                </div>

                <div class="leftmain">
                    <a href="" class="floatleft">
                        <img src="../兔小白图片/05.jpg" alt="">
                    </a>
                    <div class="floatleft">
                    <div class="">
                    <h3><a href="">住在手机里的朋友</a></h3>
                    </div>
                    <p class=" pd ">
                        通信时代，无论是初次相见还是老友重逢，交换联系方式，
                        常常是彼此交换名片，然后郑重或是出于礼貌用手机记下
                        对方的电话号码。在快节奏的生活里，我们不知不觉中就
                        成为住在别人手机里的朋友。又因某些意外，变成了别人
                        手机里匆忙的过客，这种快餐式的友谊 ...
                    </p>
                    <div class="footer">
                        <div class="floatleft" >
                            <img src="../兔小白图片/newsbg01.png" alt="">
                            <a href="">个人博客</a>
                            <img src="../兔小白图片/newsbg02.png" alt="">
                            2014-02-19
                        </div >
                        <div class="floatright" style="padding: 0 20px 0 0;" >
                            <img src="../兔小白图片/newsbg03.png" alt="">
                            评论
                            <a href="">(30)</a>
                            <img src="../兔小白图片/newsbg04.png" alt="">
                            浏览
                            <a href="">(459)</a>
                        </div>
                    </div>
                    </div>
                </div>

                <div class="leftmain">
                    <a href="" class="floatleft">
                        <img src="../兔小白图片/06.jpg" alt="">
                    </a>
                    <div class="floatleft">
                    <div class="">
                    <h3><a href="">住在手机里的朋友</a></h3>
                    </div>
                    <p class=" pd ">
                        通信时代，无论是初次相见还是老友重逢，交换联系方式，
                        常常是彼此交换名片，然后郑重或是出于礼貌用手机记下
                        对方的电话号码。在快节奏的生活里，我们不知不觉中就
                        成为住在别人手机里的朋友。又因某些意外，变成了别人
                        手机里匆忙的过客，这种快餐式的友谊 ...
                    </p>
                    <div class="footer">
                        <div class="floatleft" >
                            <img src="../兔小白图片/newsbg01.png" alt="">
                            <a href="">个人博客</a>
                            <img src="../兔小白图片/newsbg02.png" alt="">
                            2014-02-19
                        </div >
                        <div class="floatright" style="padding: 0 20px 0 0;" >
                            <img src="../兔小白图片/newsbg03.png" alt="">
                            评论
                            <a href="">(30)</a>
                            <img src="../兔小白图片/newsbg04.png" alt="">
                            浏览
                            <a href="">(459)</a>
                        </div>
                    </div>
                    </div>
                </div>

                <div class="leftmain">
                    <a href="" class="floatleft">
                        <img src="../兔小白图片/01.jpg" alt="">
                    </a>
                    <div class="floatleft">
                    <div class="">
                    <h3 ><a href="">住在手机里的朋友</a></h3>
                    </div>
                    <p class=" pd ">
                        通信时代，无论是初次相见还是老友重逢，交换联系方式，
                        常常是彼此交换名片，然后郑重或是出于礼貌用手机记下
                        对方的电话号码。在快节奏的生活里，我们不知不觉中就
                        成为住在别人手机里的朋友。又因某些意外，变成了别人
                        手机里匆忙的过客，这种快餐式的友谊 ...
                    </p>
                        <div class="footer">
                        <div class="floatleft" >
                            <img src="../兔小白图片/newsbg01.png" alt="">
                            <a href="">个人博客</a>
                            <img src="../兔小白图片/newsbg02.png" alt="">
                            2014-02-19
                        </div >
                        <div class="floatright" style="padding: 0 20px 0 0;" >
                            <img src="../兔小白图片/newsbg03.png" alt="">
                            评论
                            <a href="">(30)</a>
                            <img src="../兔小白图片/newsbg04.png" alt="">
                            浏览
                            <a href="">(459)</a>
                        </div>
                    </div>
                    </div>
                </div>
            </div>

            <div class="right floatleft">
                <div class="righttab1">
                    <div class="righthead1">
                        <a href="">点击排行</a>
                        <a href="">最新文章</a>
                        <a href="">站长推荐</a>
                    </div>

                    <div class="rightbody1 borderbox">
                        <div>
                            <div class="inlineblock" style="background-color: #f30;">1</div>
                            <a href="">住在手机里的朋友</a>
                        </div>
                        <div >
                            <div class="inlineblock" style="background-color: #f60;">2</div>
                            <a href="">住在手机里的朋友</a>
                        </div>
                        <div>
                            <div class="inlineblock" style="background-color: #f90;">3</div>
                            <a href="">住在手机里的朋友</a>
                        </div>
                        <div>
                            <div class="inlineblock" style="background-color: #ccc;">4</div>
                            <a href="">住在手机里的朋友</a>
                        </div>
                        <div>
                            <div class="inlineblock" style="background-color: #ccc;">5</div>
                            <a href="">住在手机里的朋友</a>
                        </div>
                        <div>
                            <div class="inlineblock" style="background-color: #ccc;">6</div>
                            <a href="">住在手机里的朋友</a>
                        </div>
                    </div>
                </div>

                <div class="righttab2">

                    <div class="righthead2"><h3>标签云</h3></div>

                    <div class="rightbody2">
                        <a href="" style="background-color: #036564;">个人博客</a>
                        <a href="" style="background-color: #eb6841;">web开发</a>
                        <a href="" style="background-color: #3fb86f;">前端设计</a>
                        <a href="" style="background-color: #FE4365;">Html</a>
                        <a href="" style="background-color: #fc9d9a;">CSS3</a>
                        <a href="" style="background-color: #EDC951;">Html5+CSS3</a>
                        <a href="" style="background-color: #c8c8a9;">百度</a>
                        <a href="" style="background-color: #83af98;">Javasript</a>
                        <a href="" style="background-color: #8a9b0f">web开发</a>
                        <a href="" style="background-color: #EB6841;">前端设计</a>
                        <a href="" style="background-color: #3FB8AF;">Html</a>
                        <a href="" style="background-color: #FE4365;">CSS3</a>
                        <a href="" style="background-color: #fc9d9a;">Html5CSS3</a>
                        <a href="" style="background-color: #3299bb;">百度</a>
                    </div>
                </div>

                <div class="righttab3">

                    <div class="righthead3"><h3>图文推荐</h3></div>

                    <div class="rightbody3 .inlineblock">
                        
                        <div class="clearfix groupw">
                            <a href="" class="floatleft">
                                <img src="../兔小白图片/01.jpg" alt="">
                            </a>
                        
                            <div class="group floatleft">
                                <a href="">住在手机里的朋友</a>
                                <div class="floatleft" >
                                    <img src="../兔小白图片/手机.png" alt="">
                                    <a href="">手机配件</a>
                                    <img src="../兔小白图片/datepng.png" alt="">
                                    2015-02-15
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="rightbody3 .inlineblock">
                        
                        <div class="clearfix groupw">
                            <a href="" class="floatleft">
                                <img src="../兔小白图片/02.jpg" alt="">
                            </a>
                    
                            <div class="group floatleft">
                                <a href="">住在手机里的朋友</a>
                                <div class="floatleft" >
                                    <img src="../兔小白图片/手机.png" alt="">
                                    <a href="">手机配件</a>
                                    <img src="../兔小白图片/datepng.png" alt="">
                                    2015-02-15
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="rightbody3 .inlineblock">
                        
                        <div class="clearfix groupw">
                            <a href="" class="floatleft">
                                <img src="../兔小白图片/03.jpg" alt="">
                            </a>
                        
                            <div class="group floatleft">
                                <a href="">教你怎样用欠费手机打电话</a>
                                <div class="floatleft" >
                                    <img src="../兔小白图片/手机.png" alt="">
                                    <a href="">手机配件</a>
                                    <img src="../兔小白图片/datepng.png" alt="">
                                    2015-02-15
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="rightbody3 .inlineblock">
                        
                        <div class="clearfix groupw">
                            <a href="" class="floatleft">
                                <img src="../兔小白图片/04.jpg" alt="">
                            </a>
                        
                            <div class="group floatleft">
                                <a href="">手机的16个小秘密，据说...</a>
                                <div class="floatleft" >
                                    <img src="../兔小白图片/手机.png" alt="">
                                    <a href="">手机配件</a>
                                    <img src="../兔小白图片/datepng.png" alt="">
                                    2015-02-15
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="rightbody3 .inlineblock">
                        
                        <div class="clearfix groupw">
                            <a href="" class="floatleft">
                                <img src="../兔小白图片/05.jpg" alt="">
                            </a>
                        
                            <div class="group floatleft">
                                <a href="">教你怎样用欠费手机打电话</a>
                                <div class="floatleft" >
                                    <img src="../兔小白图片/手机.png" alt="">
                                    <a href="">手机配件</a>
                                    <img src="../兔小白图片/datepng.png" alt="">
                                    2015-02-15
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    
                <img src="../兔小白图片/03.jpg" alt="" style="width: 300px; margin: 20px 0 0;">
                
                <div class="righttab4 clearfix">
                    <div class="righthead4">
                        <h3 class="" class="">友情链接 <a href="" class="floatright" >[申请友情链接]</a></h3>
                        
                    </div>
                    <div class="rightbody4 borderbox">
                        <div style="width: 270px;height: 41.33px;">
                        <a href="">杨青个人微博</a>
                        <a href="">web开发</a>
                        <a href=""> 前端设计</a>
                        <a href="">Html</a>
                        <a href="">CSS3</a>
                        <a href="">Html+css3</a>
                        <a href="">百度</a>
                        </div>
                    </div>
                </div>
            </div>

    </div>
</body>
</html>